<!DOCTYPE html>
<html style="height: 100%;">

<head>
    <meta charset="UTF-8">
    <title>门禁后台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui/layer/layer.css" media="all">
    <link rel="stylesheet" href="layui/laydate/laydate.css" media="all">
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>

<body style="height: 100%;">
    <div class="layui-row" style="height: 100%;">
        <div class="layui-col-xs12">
            <ul class="layui-nav" lay-filter="navtitle">
                <li class="layui-nav-item"><a href="#">系统配置</a></li>
                <li class="layui-nav-item"><a href="#">MQTT配置</a></li>
                <li class="layui-nav-item"><a href="#">权限名单</a></li>
                <li class="layui-nav-item"><a href="#">数据记录</a></li>
            </ul>
        </div>
        <div class="layui-col-xs12" style="height: 90%;">
            <iframe id="mainiframe" style="width: 99.5%;height: 100%;"></iframe>
        </div>
    </div>

    <script src="jquery/jquery-3.2.1.min.js"></script>
    <script src="layui/layui.js"></script>
    <script>
        layui.use('element', function() {
            var element = layui.element;

            //事件触发
            element.on('nav(navtitle)', function(elem) {
                switch (elem[0].innerText) {
                    case "系统配置":
                        $("#mainiframe").attr("src", "SystemSetUp.html");
                        $("#mainiframe").click();
                        break;
                    case "MQTT配置":
                        $("#mainiframe").attr("src", "MqttSetUp.html");
                        $("#mainiframe").click();
                        break;
                    case "权限名单":
                        $("#mainiframe").attr("src", "jurisdictionIndex.html");
                        $("#mainiframe").click();
                        break;
                    case "数据记录":
                        $("#mainiframe").attr("src", "mjdataIndex.html");
                        $("#mainiframe").click();
                        break;
                    default:
                        break;
                }
            });
        });
    </script>
</body>

</html>